<template>
    <div class="question">
        <div class="resolve">
            <div class="active">全部</div>
            <div class="">未解决</div>
        </div>
        <section v-for="index in 5" :key="index">
            <div class="title">{{index}}代码为什么写不好 <header>  <el-select v-model="value" placeholder="请选择">
                <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                </el-option>
            </el-select> </header> </div>
            <div class="time">2022-03-03  <span>匿名提问</span> <span> 前端问题</span></div>
            <p><span @click="todetail">...查看全文</span>代码为什么写不好代码为什么写不好代码为什么写不好代码为什么写不好代码为什么写不好代码为什么写不好代码为什么写不好代码为什么写不好代码为什么写不好代码为什么写不好代码为什么写不好代码为什么写不好代码为什么写不好代码为什么写不好代码为什么写不好代码为什么写不好代码为什么写不好代码为什么写不好代码为什么写不好代码为什么写不好代码为什么写不好代码为什么写不好代码为什么写不好代码为什么写不好代码为什么写不好代码为什么写不好代码为什么写不好代码为什么写不好代码为什么写不好代码为什么写不好代码为什么写不好代码为什么写不好代码为什么写不好代码为什么写不好代码为什么写不好代码为什么写不好代码为什么写不好代码为什么写不好代码为什么写不好代码为什么写不好代码为什么写不好代码为什么写不好代码为什么写不好代码为什么写不好代码为什么写不好代码为什么写不好代码为什么写不好代码为什么写不好</p>
            <div class="teacher">老师姓名 <span style="float: right">  <el-link type="primary"  @click="dialogVisible = true">回复</el-link></span></div>
            <p>代码为什么写不好代码为什么写不好代码为什么写不好代码为什么写不好代码为什么写不好代码为什么写不好代码为什么写不好代码为什么写不好代码为什么写不好代码为什么写不好代码为什么写不好代码为什么写不好</p>
        </section>

        <el-dialog
                center
                title="回复信息"
                :visible.sync="dialogVisible"
                width="30%"
                :before-close="handleClose">
            <div class="questionMsg">
                问题信息
            </div>
            <div>
                <el-input
                        type="textarea"
                        :rows="7"
                        maxlength="500"
                        show-word-limit
                        placeholder="请输入内容"
                        v-model="textarea">
                </el-input>
            </div>
            <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false" round>取 消</el-button>
    <el-button type="primary" @click="dialogVisible = false" round>提交</el-button>
  </span>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        name: "askQuestion",
        data() {
            return {
                textarea: "",
                dialogVisible: false,
                options: [{
                    value: '选项1',
                    label: '已解决'
                }, {
                    value: '选项2',
                    label: '未解决'
                }],
                value: '选项1'
            }
        },
        methods:{
            todetail(){
                this.$router.push({path:'/answerQuestionsDetail',query:{id:103}})
            },
            handleClose(done) {
                console.log(done)
            }


        }
    }
</script>

<style scoped lang="less">
    /deep/.el-dialog__title{
        color: #66b1ff;
    }
    .question /deep/ .el-dialog{
        min-height: 350px;
    }
    .resolve{
        display: flex;
        div{
            padding: 10px 30px;
            background: #E8E8E8;
            color: #888;
            border-radius: 20px;
            margin-right: 30px;
        }
        .active{
            background: white;
            color: black;

        }
    }
    .questionMsg{
        margin-bottom: 10px;
    }
        section{
            padding: 20px;
            background-color: white;
            border-radius: 20px;
            color: rgba(48, 48, 48, 1);
            text-align: left;
            margin: 20px 0;
            background: white;

            .title{
                margin-bottom: 10px;
                header{
                    float: right;

                }
            }
            .time{
                color: #aaa;
                font-size: 14px;
                span{
                    font-size: 14px;
                    color: #aaa;
                    margin-left: 20px;
                }
                span:nth-of-type(2){
                    color: #66b1ff;
                }
            }
            .teacher{
                margin-top: 40px;
            }
            p{
                margin: 20px 0;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
                overflow: hidden;
                position: relative;
                span{
                    position: absolute;
                    width: 200px;
                    right: 0px;
                    bottom: 0px;
                    color: #66b1ff;
                    background: white;
                }
            }
        }





</style>
